<template>
    <v-container>
        <v-layout row justify-space-around>
            <v-flex xl2>
                <v-card>
                    <side-menu :menus="tools"/>
                </v-card>
            </v-flex>
            <v-flex xl9>
                <v-layout column>
                    <v-flex v-for="item of tools" :key="item.position" mb-6>
                        <tool-link :id="`tool${item.position}`" :tool="item"/>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import ToolLink from './components/ToolLink'
    import SideMenu from './components/SideMenu'
    import {tools} from '../../data.js';
    export default {
        components: {
            SideMenu,
            ToolLink
        },
        data: () => ({
            tools
        })
    };
</script>
